<template>
    <div class="app-container-result">
        <!-- 内容展示区 -->
        <div class="progress-container">
            <!-- left -->
            <div class="leftContainer" @contextmenu="showMenu">
                <iframe
                    id="myIframe"
                    class="myIframe"
                    :src="
                        '/static/pdf/web/viewer.html?file=/' +
                        documentId +
                        '.pdf#locale=zh-CN'
                      "
                    width="100%"
                    height="100%"
                    style="background: #fff"
                    frameborder="0"
                ></iframe>
            </div>
            <!-- middle -->
            <div class="midRule">
                <div v-for="(i,index) in diffBtnList" :key="index"
                     class="diff-control-item" @click="scrollToLoc(i)" :id="'diff-id-'+index" :style="'top:'+i.top+'px'">
                    <i :class="i.type" class="icon-diff"></i>
                </div>
            </div>
            <!-- right -->
            <div class="rightContainer">

            </div>
        </div>
        <!-- svg连线区域 -->
        <div>
            <svg class="diff-line-container">
                <g style="fill:transparent;stroke-width:1">
                    <!-- 第一段连接左侧x1 y1,x2 y2,x3 y3 -->
                    <!-- x1 y1--标记rect的左侧中间点坐标-->
                    <!-- x2 canvas宽度；y2和y1一样-->
                    <!-- x3 y3 中间icon左侧中间点坐标 -->
                    <polyline :points="diffLineData.l_x1+' '+diffLineData.l_y1+','+diffLineData.l_x2+' '+diffLineData.l_y2+','+diffLineData.l_x3+' '+diffLineData.l_y3" style="stroke:#f3a496"></polyline>
                    <polyline :points="diffLineData.r_x1+' '+diffLineData.r_y1+','+diffLineData.r_x2+' '+diffLineData.r_y2+','+diffLineData.r_x3+' '+diffLineData.r_y3" style="stroke:#f3a496"></polyline>
                </g>
            </svg>
        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            //文档id
            documentId: "oldFile5/5页电子围栏系统方案(标准)",
            //新增批注数据
            form: {
                documentId: "", // 批注文档id
                id: "", // 主键
                reportId: "1", // 批注报告id
                pznr: "", // 批注内容
                pagePDF: "", // PDF 页码
            },


            diffBtnList: [
                {
                    top: 57,
                    type: 'change-i',
                    leftObj: {
                        left: 101,
                        top: 57,
                        width: 200,
                        height: 90
                    },
                    rightObj: {
                        left: 101,
                        top: 37,
                        width: 200,
                        height: 120
                    }
                },
                {
                    top: 510,
                    type: 'add-i',
                    leftObj: {
                        left: 47,
                        top: 685,
                        width: 300,
                        height: 190
                    },
                    rightObj: {
                        left: 31,
                        top: 666,
                        width: 300,
                        height: 210
                    }
                }
            ],
            leftRectData: {
                left: 0,
                top: 0,
                width: 0,
                height: 0
            },
            rightRectData: {
                left: 0,
                top: 0,
                width: 0,
                height: 0
            },
            diffLineData: {
                // l_x1:301,
                // l_y1:97,
                // l_x2:394,
                // l_y2:97,
                // l_x3:459,
                // l_y3:66,

                // r_x1:481,
                // r_y1:66,
                // r_x2:554,
                // r_y2:97,
                // r_x3:654,
                // r_y3:97


                l_x1: 0,
                l_y1: 0,
                l_x2: 0,
                l_y2: 0,
                l_x3: 0,
                l_y3: 0,

                r_x1: 0,
                r_y1: 0,
                r_x2: 0,
                r_y2: 0,
                r_x3: 0,
                r_y3: 0
            },
            l_y1: 0,  //暂存左侧y1坐标点
            r_y3: 0,  //暂存右侧y3坐标点
            lastClickPonitTop: null,  //暂存中间差异点上一次点击的点
        }
    },
    mounted() {
        this.getMessage();  //点击标注，滑滚到对应位置；
        this.scrollToLoc(this.diffBtnList[0]);
        this.$nextTick(() => {
            this.linseLeftScroll();
            this.linseRightScroll();
        })
    },
    methods: {
        // 接受数据
        getMessage() {
            //获取iframe
            let iframe = document.getElementById("myIframe");
            // iframe监听是否有数据传入，将传入的数据作为参数传递给pdf.js的find接口
            iframe.contentWindow.addEventListener(
                "message",
                function (e) {
                    //这里打印一下，看是否拿到了传入的数据
                    console.log(
                        "这里打印一下，看是否拿到了传入的数据" + JSON.stringify(e.data)
                    );
                    // 这里打印的是pdf.js暴露出来的find接口
                    console.log(iframe.contentWindow.PDFViewerApplication.findBar);
                    // 输入查询数据
                    iframe.contentWindow.PDFViewerApplication.findBar.findField.value =
                        e.data.selectText;
                    // 要求查询结果全体高亮
                    iframe.contentWindow.PDFViewerApplication.findBar.highlightAll.checked = true;
                    // 上面两部已经OK，触发highlightallchange方法。OK。全部完成，效果
                    iframe.contentWindow.PDFViewerApplication.findBar.dispatchEvent(
                        "highlightallchange"
                    );
                    iframe.contentWindow.PDFViewerApplication.pdfViewer.currentPageNumber =
                        parseInt(e.data.pageIndex);
                },
                false
            );
        },
        //左侧容器添加监听事件，重定义svg线端点
        linseLeftScroll() {
            let _this = this;
            let leftEle = document.getElementsByClassName("leftContainer")[0];
            leftEle.addEventListener('scroll', function () {   //左侧容器监听滚动条高度，重新计算x1坐标点
                // 获取元素的top位置
                const top = leftEle.scrollTop;
                _this.resetLeftRectLine(top);
            });
        },
        resetLeftRectLine(top) {
            let scroll_l_y1 = this.l_y1 - top;  //原始高度-滚动条高度
            this.diffLineData.l_y1 = scroll_l_y1;
        },
        //右侧容器添加监听事件，重定义svg线端点
        linseRightScroll() {
            let _this = this;
            let rightEle = document.getElementsByClassName("rightContainer")[0];
            rightEle.addEventListener('scroll', function () {   //右侧容器监听滚动条高度，重新计算x3坐标点
                // 获取元素的top位置
                const top = rightEle.scrollTop;
                _this.resetRightRectLine(top)
            });
        },
        resetRightRectLine(top) {
            let scroll_r_y3 = this.r_y3 - top;  //原始高度-滚动条高度
            this.diffLineData.r_y3 = scroll_r_y3;
        },
        // 点击中间差异，滚动
        scrollToLoc(item) {
            console.log('item', item);

            if (this.lastClickPonitTop != item.top) {
                this.lastClickPonitTop = item.top;
                this.leftRectData = item.leftObj;   //左边框选区域信息
                this.rightRectData = item.rightObj;  //右边框选区域信息
                this.computedLoc(item.leftObj, item.rightObj, item.top);
                let view_height = document.getElementsByClassName("leftContainer")[0].clientHeight;
                document.getElementsByClassName("leftContainer")[0].scrollTop = item.leftObj.top - view_height / 2;
                document.getElementsByClassName("rightContainer")[0].scrollTop = item.rightObj.top - view_height / 2;
            }
        },
        // 根据宽高位置计算线的点
        computedLoc(leftObj, rightObj, top) {
            let l_x1 = leftObj.left + leftObj.width;    //x1应在标注块的最右侧，标注块的x（left）加上标注块的宽；
            let l_y1 = leftObj.top + leftObj.height / 2;   //y1应在标注块右侧中间位置，标注块的y（top）加上（标注块高度/2）；
            let l_x2 = document.getElementsByClassName("leftContainer")[0].clientWidth;  //x2应在左侧展示区最右侧
            let l_y2 = top + 9;     //y2应为此标注块icon中间位置（中间的icon）
            let l_x3 = l_x2 + 69;
            let l_y3 = top + 9;

            let r_x1 = l_x3 + 18;
            let r_y1 = top + 9;
            let r_x2 = l_x2 + 160;
            let r_y2 = top + 9;
            let r_x3 = r_x2 + rightObj.left;
            let r_y3 = rightObj.top + rightObj.height / 2;

            this.diffLineData = {
                l_x1: l_x1,
                l_y1: l_y1,
                l_x2: l_x2,
                l_y2: l_y2,
                l_x3: l_x3,
                l_y3: l_y3,

                r_x1: r_x1,
                r_y1: r_y1,
                r_x2: r_x2,
                r_y2: r_y2,
                r_x3: r_x3,
                r_y3: r_y3
            }
            this.l_y1 = JSON.parse(JSON.stringify(l_y1));
            this.r_y3 = JSON.parse(JSON.stringify(r_y3));
            console.log(this.diffLineData)
        }

    }

}
</script>

<style lang="scss" scoped>
.app-container-result {
    width: 100%;
    height: 100%;
}

.progress-container {
    width: 100%;
    display: flex;
    height: calc(100% - 40px);
    background: rgba(237, 237, 240, 1);


    .leftContainer {
        width: calc(50% - 80px);
        height: auto;
        overflow: auto;
    }

    .midRule {
        width: 160px;
        background: #d9d9d9;
        position: relative;
        overflow: auto;

        .diff-control-item {
            position: absolute;
            left: 65px;
            padding: 0 4px;
            width: auto;
            height: 18px;
            display: flex;
            align-items: center;
            box-sizing: border-box;

            .icon-diff {
                display: inline-block;
                width: 18px;
                height: 18px;
                background-size: contain;
                background-repeat: no-repeat;
            }

            .change-i {
                background-image: url("../assets/images/icon-change.svg");
            }

            .add-i {
                background-image: url("../assets/images/icon-insert-red.svg");
            }

            .delete-i {
                background-image: url("../assets/images/icon-delete-red.svg");
            }
        }
    }

    .rightContainer {
        width: calc(50% - 80px);
        height: 100%;
        overflow: auto;
    }
}

.diff-line-container {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
</style>
